<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>在线充值</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/index.css"/>
    <script src="__STATIC_URL__/static/mobile/js/weui.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        body{
            font-size: 16px;
            font-weight: bolder;
            font-family: "arial", "微软雅黑";

        }


        #cz p{
            line-height: 20px;
        }

        #czshow{
            padding: 10px 0;
            color: #757575;
            text-align: left;
            margin-top: 0;
            display: none;
            margin-bottom: 20px;
            font-size: 13px;
            font-weight: 300;
        }
        #czshow li{
            margin:10px 0;
        }
        .cont{
            padding:0 20px;
        }
        .czheader{
            padding: 30px 0;
            border-bottom: 1px solid #ddd;
        }
        a{
            color: #444343;
        }
        .aft{
            content: " ";
            float:left;
            height: 6px;
            width: 6px;
            border-width: 2px 2px 0 0;
            border-color: #444343;
            border-style: solid;
            -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            margin-top: 7px;
            margin-left: 5px;
        }
        .text{
            padding: 20px 0;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
            font-size: 14px;
            color: #444343;
        }
        #cz li {
            height: 45px;
        }

        .jine ul li {
            width: 29%;
            margin-right: 10px;
            border: none;
            line-height: 45px;
            float: left;
            margin-bottom: 15px;
            text-align: center;
            border-radius: 5px;
            background: #eae9e9;
        }
        .p_border {
            border:none;
            background: #38c757 !important;
            color:#fff;
        }
        .jine div {
            border: 1px solid #dcdcdc;
            margin: 0 15px 15px 0;
            height: 45px;
            border-radius: 5px;
        }
        .jine div input {
            width: 100%;
            border: none;
            height: 100%;
            text-indent: 20px;
            border-radius: 5px;
        }
        .jine .weui-btn {
            margin: 0 15px 15px 0;
        }
        #czshow img{
            width: 20px;

            float: left;

            margin-right: 10px;
        }
        #czshow li:first-child{
            font-size: 15px;
            color: #9c9c9c;
            padding: 0 0 10px 0;
        }
        .pic{
            background: #FF9F58;
            font-size: 12px;
            padding: 2px;
            border-radius: 3px;
            color: #fff;
            margin-right: 10px;
            width: 13px;
            height: 16px;
            line-height: 16px;
        }
        .bu{
            background: #8ff1c8;
        }
        .qu{
            background:#B8D204;
        }
        .follow{
            width: 100%;
            height: auto;
            padding: 14px 0;
            background:rgba(0, 0, 0, 0.6);
            color: #fff;
            position: absolute;
            top: 0;
            font-weight: 200;
            font-size: 13px;

            z-index: 1000;
            text-align: center;
        }
        .weui-btn_l{
            background-color: #1AAD19;
        }
        .cancel{
            display: inline-block;
            width: 20px;height:3px;
            background: #a7a7a7;
            line-height: 0;font-size:0;vertical-align: middle;
            -webkit-transform: rotate(45deg);
            margin-left: 5px;
        }
        .cancel:after{
            content:'/';
            display:block;
            width: 20px;height:3px; background:#a7a7a7;-webkit-transform: rotate(-90deg);}
        .tex{
            font-size: 15px;
            font-weight:200;
        }
    </style>
</head>

<body>
{eq name=":getusersubscribe($info['card_id'],$user['openid'])" value="未关注"}
<div class="follow">
    <span>获取更多信息，请关注公众号</span>
    <button class="weui-btn weui-btn_mini weui-btn_l showIOSDialog2">关注</button>
    <span class="cancel"></span>
</div>
{/eq}
<div class="container cont" id="container">

    <div class="czheader">
        <div>
            帐户余额: {$info['balance']}元
        </div>

    </div>

    <div class="text">
        <div class="left">
            充值金额
        </div>
        <!--
        <div class="right">
            <a href="javascript:;" class="showIOSDialog1">
                <p class="left">充值说明</p>
                <span class="aft"></span>
            </a>

        </div>-->

        <div style="clear:both;"></div>
    </div>
    <div class="jine">

        <form action="" method="post">
            <ul class="clearfix" id="cz" style="padding-bottom: 0;">
                {volist name="czgive" id="vo"}
                <li class="cz {eq name='i' value='1'}p_border{/eq}" data-czid="{$vo['id']}" data-bonus="{$vo['bonus']}" data-zscardidnew='{:getgivecardnew($vo["zs_card_id_all"],0)}' data-zscardid="{:getgivecard($vo.zs_card_id,0,$vo['zs_card_id_all'])}" data-zs_money="{$vo.zs_money}" data-id="{$vo.cz_money}">{$vo.cz_money}元</li>
                {/volist}
                {eq name="$card['is_cz_qtprice']" value="0"}
                <li class="qita cz">其他金额</li>
                {/eq}
            </ul>
            <div style="display:none;" id="qita">
                <input type="number" name="money" id="money" placeholder="充值金额(元)" min="0.1" max="9999" maxlength="4"/>
                <input type="hidden" name="giveid" id="giveid" value="">
                <input type="hidden" name="mid" id="mid" value="{$user.mid}">
                <input type="hidden" name="openid" id="openid" value="{$user.openid}">
                <input type="hidden" name="orderid" id="orderid" value="">
                <input type="hidden" name="cardid" id="cardid" value="{$info.id}">
                <input type="hidden" name="cardid" id="card_id" value="{$info.card_id}">
                <input type="hidden" name="givetype" id="givetype" value="giverule">
                <input type="hidden" name="is_recharge" id="is_recharge" value="{$card.is_recharge}">
                <input type="hidden" name="is_cz_qtprice" id="is_cz_qtprice" value="{$card.is_cz_qtprice}">
            </div>
            <ol class="weui-cells__title" type="1"  id="czshow">

            </ol>
            <a href="javascript:;" class="weui-btn weui-btn_primary">充值</a>
        </form>
    </div>

</div>
<!--弹出层begin-->
<div id="dialogs">
    <div class="js_dialog" id="iosDialog2" style="opacity: 1; display: none;">
        <div class="weui-mask">
        </div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">
                <div class="bgfff chakan" >
                    <img src="#" alt="" style="width:200px;height:200px;"id="picwx">
                    <p class="tex">长安识别二维码,关注公众号.</p>
                </div>
            </div>
            <div class="weui-dialog__ft">

                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
            </div>
        </div>
    </div>
</div>
<!--弹出层begin-->
<div id="dialog">
    <div class="js_dialog" id="iosDialog1" style="opacity: 1; display: none;">
        <div class="weui-mask">
        </div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">
                <div class="bgfff chakan" >
                    <p class="chu">储值账户&nbsp;:&nbsp;<span class="yue">{$info['balance']}</span></p>
                </div>
            </div>
            <div class="weui-dialog__ft">

                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
            </div>
        </div>
    </div>
</div>
<!--弹出层begin-->
<div id="dialogt">
    <div class="js_dialog" id="iosDialog3" style="opacity: 1; display: none;">
        <div class="weui-mask">
        </div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">
                <div class="bgfff chakan" >
                    <p class="lay"></p>
                </div>
            </div>
            <div class="weui-dialog__ft">

                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
            </div>
        </div>
    </div>
</div>

</body>
<script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" id="tpl_dialog">
    $(function(){
        var $iosDialog1 = $('#iosDialog1');
        var $iosDialog2 = $('#iosDialog2');
        $('#dialogs').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });
        $('#dialog').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });
        $('#dialogt').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });
        $('.showIOSDialog1').on('click', function(){
            $iosDialog1.fadeIn(200);
        });
        $('.showIOSDialog2').on('click', function(){
            $iosDialog2.fadeIn(200);
        });

        $(".cancel").click(function(){
            $(this).parent().attr("style","display:none");
        })
    });
</script>
<script>
    $(function(){
        var card_id = $('#card_id').val();
        // console.log(11,card_id);
        $.ajax({
            type: "POST",
            url: "{:url('cardmarke/getwxqrcode')}",
            data: {
                cardid:card_id
            },
            success: function (data) {
                //console.log(data);

                $("#picwx").attr("src",data.date);

            }
        });
    })
</script>
<script>


</script>
<script type="text/javascript">
    $(function () {
        var a = "true";

        var price = $("#cz").children().eq(0).attr('data-id');
        var zscardid = $("#cz").children().eq(0).attr('data-zscardid');
        var zscardidnew = $("#cz").children().eq(0).attr('data-zscardidnew');
        var bonus=$("#cz").children().eq(0).attr('data-bonus');
        var zsprice = $("#cz").children().eq(0).attr('data-zs_money');
        var czid = $("#cz").children().eq(0).attr("data-czid");
        $('#money').val(price);
        $("#giveid").val(czid);
        var is_recharge=$("#is_recharge").val();
        var is_cz_qtprice=$("#is_cz_qtprice").val();
        //is_cz_qtprice==0有其他，等于1没有
        if(is_recharge=="0"){
            // console.log($("#cz").children("li").length);

            if(is_cz_qtprice=="0"){
                $("#givetype").val("custom");

                if (a == "true") {
                    $(".qita").addClass("p_border");
                    $("#qita").show();
                    $("#czshow").css("display","none");
                    a = "false";
                } else {
                    $("#qita").hide();
                    a = "true";
                }
            }
        }else{
            $("#czshow").css("display","block");
        }
        if(zscardidnew!=""||zsprice!=0||bonus!=0){
            $("#czshow").append("<li>充值<span>"+ price + "</span>元可获赠 :"+"</li>")
        }
        if(zscardidnew!=""){

            $("#czshow").append("<li> <sanp class='pic qu'>券</sanp>" + zscardid +zscardidnew+ "</li>");
        }
        if(zsprice!=0){
            $("#czshow").append("<li> <sanp class='pic bu'>￥</sanp>送 : " + zsprice + "元</li>");
        }
        if(bonus!=0){
            $("#czshow").append("<li> <sanp class='pic'>积</sanp>积分 :  " + bonus + "</li>");

        }


        $(".sm").click(function () {
            if ($(".chakan").css("display") == "none") {
                $(".chakan").css("display", "block");
            } else {
                $(".chakan").css("display", "none");
            }

        });

        $(".cz").click(function () {
            var id = $(this).attr("data-czid");
            var czid = $(this).attr("data-czid");
            var price = $(this).attr('data-id');
            $("#cz li").removeClass('p_border');
            $("#giveid").val(czid);
            $(this).addClass('p_border');
            $('#money').val(price);
            $("#qita").hide();
            $("#givetype").val("giverule");
            a = "true";
            //赋值显示
            var zscardid = $(this).attr('data-zscardid');
            var zscardidnew = $(this).attr('data-zscardidnew');
            var zsprice = $(this).attr('data-zs_money');
            var bonus=$(this).attr('data-bonus');
            // console.log(zscardidnew);
            $("#czshow li").remove();
            $("#givetype").val("giverule");
            if(czid){

                $("#czshow").css("display","block");
                if(zscardidnew!=""||zsprice!=0||bonus!=0){
                    $("#czshow").append("<li>充值<span>"+ price + "</span>元可获赠 :"+"</li>")
                }
                if(zscardidnew!=""){
                    // console.log(11111,22);
                    $("#czshow").append("<li> <sanp class='pic qu'>券</sanp>" + zscardid +zscardidnew+ "</li>");
                }
                if(zsprice!=0){
                    $("#czshow").append("<li> <sanp class='pic bu'>￥</sanp>送 : " + zsprice + "元</li>");
                }
                if(bonus!=0){
                    $("#czshow").append("<li> <sanp class='pic'>积</sanp>积分 :  " + bonus + "</li>");

                }
            }

        })
        $(".qita").click(function () {
            $("#givetype").val("custom");

            if (a == "true") {
                $("#qita").show();
                $("#czshow").css("display","none");
                a = "false";
            } else {
                $("#qita").hide();
                a = "true";
            }

        });

        function getorder(mid) {
            var id = mid;
//            var cardid = $('#cardid').val();
//console.log(11);
            $.ajax({
                type: "POST",
                url: "{:url('carduser/getorder2')}",

                cache: false,
                async: false,
                data: {
                    id: id,

                },


                success: function (data) {
                    $('#orderid').val(data);

                }
            });
        }

        $(".weui-btn_primary").click(function () {


            var money = $('#money').val();
            var mid = $('#mid').val();
            var zs_money = $('#zs_money').val();
            getorder(mid);
            var openid = $('#openid').val();
            var orderid = $('#orderid').val();
            var cardid = $('#cardid').val();
            var giveid = $('#giveid').val();
            var givetype = $("#givetype").val();
            //console.log(11,"givetype="+givetype,"money="+money,"mid="+mid,"zs_money="+zs_money,"openid="+openid,"orderid="+orderid,"cardid="+cardid,"giveid="+giveid);


            if(money>9999){
                $(".lay").html("充值最大金额不能大于9999");
                $("#iosDialog3").fadeIn(200);
                return;
            }
            if(money<0.01){
                $(".lay").html("充值最大金额不能小于0.01");
                $("#iosDialog3").fadeIn(200);

                return;
            }
            // console.log(22);
            $.ajax({
                url: "{:url('carduser/recharge')}",
                type: 'post',
                dataType: 'json',
                data: {
                    zs_money:zs_money,
                    price: money,
                    mid: mid,
                    openid: openid,
                    orderid: orderid,
                    cardid: cardid,
                    giveid: giveid,
                    givetype: givetype
                },


                success: function (data) {
                    //console.log(11,data);

                    // return;
                    if(data.code!=0){
                        $(".lay").html(data.message);
                        $("#iosDialog3").fadeIn(200);
                    }
                    if (typeof WeixinJSBridge == "undefined") {
                        if (document.addEventListener) {
                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                        } else if (document.attachEvent) {
                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                        }
                    } else {
                        onBridgeReady(data);
                    }
                }
            })
        })


    })

    function onBridgeReady(sdata) {

        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', sdata,
            function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    paysuccess();
                }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
            }
        );

    };

    function paysuccess() {

        //  console.log(33);
        $.ajax({
            type: "POST",

            url: "{:url('carduser/r_payover')}",

            cache: false,
            dataType: "json",
            async: false,
            data: {
                id:{$user['mid']},
                orderid:$('#orderid').val(),
                cardid: $('#cardid').val(),
            },

            success: function (data) {

                if (data.code == 0) {
                    $(".lay").html(data.message);
                    $("#iosDialog3").fadeIn(200);
                    window.location.reload();
                } else {
                    $(".lay").html("支付失败");
                    $("#iosDialog3").fadeIn(200);

                }
            }


        });
    }
</script>
</html>